<template>
  <el-row>
    <el-col :span="9">
      <el-card>
        <el-button type="success" style="margin-bottom: 10px;" @click="addDialogShow = true">添加</el-button>
        <el-table :data="modelsList" border style="width: 100%">
          <el-table-column prop="mid" label="ID" width="50px" />
          <el-table-column prop="mname" label="车型名称"width="120px" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" type="success"@click="showSetAdminDialog(scope.row.mid)">喜爱的用户</el-button>
              <el-button size="small" type="primary" @click="selectBymid(scope.row.mid)">修改</el-button>
              <el-popconfirm title="你确定要删除该车型吗?" confirm-button-text="确认" cancel-button-text="取消" width="200px"
                @confirm="deleteBymid(scope.row.mid)">
                <template #reference>
                  <el-button size="small" type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
  </el-row>


  <!-- 添加模态框开始 -->
  <el-dialog v-model="addDialogShow" title="添加车型" width="500">
    <el-form>
      <el-form-item label="车型" lable-width="20%">
        <el-input v-model="modelsAdd.mname" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialogShow = false">取消</el-button>
        <el-button type="primary" @click="insert()"> 确认</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 添加模态框结束 -->

  <!-- 修改对话框开始 -->
  <el-dialog v-model="updateDialogShow" title="修改车型" width="500px">
    <el-form>
      <el-form-item label="车型" lable-width="20%">
        <el-input v-model="modelsUpdate.mname" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateDialogShow = false">取消</el-button>
        <el-button type="primary" @click="update()"> 确认</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改对话框结束 -->

  <!-- 分配用户喜好对话框开始 -->
  <el-dialog v-model="setAdminDialogShow" title="添加喜欢该车型的用户" >
    <!-- data 数据源 -->
    <el-transfer v-model="selectedids" :data="allAdmin" />
    <div class="dialog-footer">
        <el-button @click="setAdminDialogShow = false">取消</el-button>
        <el-button type="primary"@click="insertMidAndId"> 确认</el-button>
      </div>
  </el-dialog>
  <!-- 分配用户喜欢对话框结束 -->
</template>


<script setup>
import modelsApi from '@/api/modelsApi';
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { ElLoading } from 'element-plus'
import adminlikeApi from '@/api/adminlikeApi';

//存放所有姓名
const setAdminDialogShow = ref(false);
const allAdmin=ref([]);
//被选中的用户的id
const selectedids=ref([]);
//需要分配用户的车型mid
const selectMid=ref(0);



//保存部门信息的数组
const modelsList = ref([]);
//添加对话框是否显示的状态
const addDialogShow = ref(false);
//添加修改对话框是否显示的状态
const updateDialogShow = ref(false);
//被添加部门的信息
const modelsAdd = ref({
  mname: '',
});
//被修改部门的信息
const modelsUpdate = ref({
  mid: 0,
  mname: ''
});
//查询所有用户并分配该车型的对话框
function showSetAdminDialog(mid){
  adminlikeApi.allAdmin(mid)
    .then(resp=>{
      allAdmin.value=resp.data.allAdmin;
      selectedids.value=resp.data.selectedids;
      selectMid.value=mid;
      setAdminDialogShow.value = true;

    });
}
//分配员工的方法
  function insertMidAndId(){
    adminlikeApi.insertMidAndId(selectMid.value,selectedids.value)
    .then(resp =>{
      //弹出消息
      ElMessage.success(resp.msg);
      setAdminDialogShow.value = false;

      
    });
  }
//定义方法根据部门mid查询部门信息
function selectBymid(mid) {
 modelsApi.selectByMid(mid)
    .then(resp => {
      modelsUpdate.value = resp.data;
      //显示修改框
      updateDialogShow.value = true;
    });
}
//定义方法完成部门修改
function update() {
  //开启加载动画
  const loading = ElLoading.service({
    lock: true,
    text: '加载中',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  modelsApi.update(modelsUpdate.value)
    .then(resp => {
      loading.close();//取消加载动画
      if (resp.code == 10000) {
        ElMessage({
          message: resp.msg,
          type: 'success',
          duration: 1200
        });
        //隐藏对话框
        updateDialogShow.value = false;
        //刷新表格数据
        selectAll();

      } else {
        ElMessage({
          message: resp.msg,
          type: 'error',
          duration: 2000
        });
      }
    });
}

//定义方法完成部门添加
function insert() {
  //开启加载动画
  const loading = ElLoading.service({
    lock: true,
    text: '加载中',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  modelsApi.insert(modelsAdd.value)
    .then(resp => {
      loading.close();//取消加载动画
      if (resp.code == 10000) {
        ElMessage({
          message: resp.msg,
          type: 'success',
          duration: 1200
        });
        //隐藏对话框
        addDialogShow.value = false;
        //清空对话框中的数据
        modelsAdd.value = {
          mname: '',
        }
        //刷新表格数据
        selectAll();
      } else {
        ElMessage({
          message: resp.msg,
          type: 'error',
          duration: 2000
        });
      }
    });
}

//定义方法获取部门信息
function selectAll() {
  modelsApi.selectAll()//发送axios请求到服务器
    .then(resp => {
      modelsList.value = resp.data;

    });
}
//定义方法删除部门
function deleteBymid(mid) {
  //开启加载动画
  const loading = ElLoading.service({
    lock: true,
    text: '加载中',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  modelsApi.delete(
    mid)
    .then(resp => {
      loading.close();//取消加载动画
      //判断-- 弹出信息-刷新表格
      if (resp.code == 10000) {
        //弹出信息
        ElMessage({
          message: resp.msg,
          type: 'success',
          duration: 1200
        });

        //刷新表格
        selectAll();
      } else {
        ElMessage({
          message: resp.msg,
          type: 'error',
          duration: 2000
        });
      }
    });
}


selectAll();
</script>

<style scoped></style>